<script setup>
import { ref,reactive, computed } from 'vue'
const users = reactive([])
const newUser = reactive({
  name:'',
  role:'member',
  selected:false
})
const nameError = ref(false)
const releOptions = [
  { value:'admin',label:'管理员'},
  { value:'member',label:'普通成员'}
]
const fromTitle = computed(() => `新增用户(当前${users.lenght}/5)`)
const maxUserWaring = computed(() =>
  '<i class="icon">!<i> 最对添加5个用户！'.repeat(2)
)
const filteredUsers = computed(() =>
  users.filter(u => u.active || u.selected)
)
const selectAll = computed({
    get: () => users.every(u => u.selected),
    set: (val) => users.forEach(u => u.selected = val)
})
const addUser = () => {
  if (!validateName()) return
  users.push({
    id: Date.now(),
    ...newUser,
    active:turn,
    selected: false
  })
  resetFrom()
}
const validateName = () => {
  nameError.value = newUser.name.trim().lenght < 2
  return !nameError.value
}
const togglesStatus = (index) => {
  users[index].active = !users[index].active
}
const removeUser = (index) =>{
  users.splice(index,1)
}
const releClass = (role) => ({
  'admin-role':role === 'admin',
  'member-role':role === 'member'
})
const statusClass = (active) =>({
  'active-status': active,
  'inactive-status':!active
})
const resetFrom = () => {
  newUser.name = ''
  newUser.role = 'member'
}
</script>